<template>
    <el-container class="login background">
        <el-main style="display: table-cell;vertical-align: middle;;height: 100%">
            <el-card class="login-tabs" type="border-card" v-model="avctiveTab">
                <div class="login-title">
                    <div class="login-img"></div>
                </div>
                <el-row style="height: 10px"></el-row>
                <el-form :model="registerForm" status-icon :rules="rules" ref="registerForm" label-width="150px"
                         style="margin-top: 1em">
                    <el-form-item class="form-label" label="账号:" prop="userName" style="margin-top: 1em"
                                  :required=true>
                        <el-col :span="19">
                            <el-input v-model="registerForm.userName" placeholder="账号"
                                      maxlength="11" autocomplete="off"></el-input>
                        </el-col>
                    </el-form-item>
                    <el-form-item class="form-label" label="密码:" prop="pass" style="margin-top: 3em"
                                  :required=true>
                        <el-col :span="19">
                            <el-input type="password" v-model="registerForm.pass" placeholder="密码"
                                      maxlength="20" autocomplete="off"></el-input>
                        </el-col>
                    </el-form-item>
                    <el-form-item style="margin-top: 3em">
                        <el-col :span="19">
                            <el-button class="el-button" type="primary"
                                       @click="submitForm('registerForm')"
                                       style="width: 100%">登 录
                            </el-button>
                        </el-col>
                    </el-form-item>
                </el-form>
            </el-card>
        </el-main>
    </el-container>
</template>

<script>
    export default {
        name: "Login",
        data() {
            const checkUserName = (rule, value, callback) => {
                if (!value) {
                    return callback(new Error('请填写账号'));
                } else {
                    callback();
                }
            };
            const pass = (rule, value, callback) => {
                let passWord = /^[A-Za-z0-9_\-\u4e00-\u9fa5]{6,20}$/;
                if (value === '') {
                    callback(new Error('请输入密码'));
                } else if (!passWord.test(value)) {
                    callback(new Error('密码为6-20位的字母、数字、下划线'));
                } else {
                    callback();
                }
            };
            return {
                loginTrue: false,
                dialogWidth: 0,
                status: false,
                avctiveTab: 'tab1',
                checked: false,
                errMsg: '',
                registerForm: {
                    userName: '',
                    pass: ''
                },
                rules: {
                    userName: [
                        {validator: checkUserName, trigger: 'blur'}
                    ],
                    pass: [
                        {validator: pass, trigger: 'blur'}
                    ]
                }
            }
        },
        methods: {
            doLogin(user_name, user_password) {
                this.userNickname = this.$store.state.accessToken;
                axios({
                    method: "post",
                    url: "/bjdzms/user/login.do",
                    params: {
                        userName: user_name,
                        pwd: user_password
                    }
                }).then((res) => {
                    this.loginTrue = res.data.code == "true" ? true : false;
                    if (this.loginTrue) {
                        this.$store.dispatch("userLogin", {
                            user: JSON.stringify(res.data.datas)
                        });
                        // debugger

                        this.$router.push({path: "/"})
                    } else {
                        this.$message({
                            message: '账号或密码错误',
                            type: 'error'
                        });
                    }
                })
            },
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.doLogin(this.registerForm.userName, this.registerForm.pass)
                    } else {
                        //console.log('error submit!!');
                        this.operError("请正确填写登陆信息");
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            openFullScreen(msg, time) {
                const loading = this.$loading({
                    lock: true,
                    text: msg,
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
                setTimeout(() => {
                    loading.close();
                    this.$router.push('/Admin');
                    location.reload();
                }, time);
            },
            operError(msg) {
                this.$message({
                    type: "error",
                    center: true,
                    offset: 50,
                    message: msg,
                    duration: 1500,
                    showClose: false
                })
            },
            setDialogWidth() {
                let val = document.body.clientWidth;
                const def = 400; // 默认宽度
                if (val < def) {
                    this.dialogWidth = '100%'
                } else {
                    this.dialogWidth = def + 'px'
                }
            },
            login(res, formName) {
                if (res.data.msg) {
                    this.resetForm(formName);
                } else {
                    this.resetForm(formName);
                    this.loginTrue = true;
                }
            },
        },
        created() {
            this.setDialogWidth()
        },
        mounted() {
            window.onresize = () => {
                return (() => {
                    this.setDialogWidth()
                })()
            };
        },
    }
</script>

<style>
    .login .el-dialog__body {
        background: #6d757a33 !important;
    }

    .login .el-dialog__header {
        background: #6d757a33 !important;
    }

    .login .el-dialog__title {
        color: #ffffff;
    }

    .login .el-dialog {
        background: #6d757a33 !important;
    }

    .login .form-label .el-form-item__label {
        color: #000000;
        /*font-family: 黑体;*/
        font-size: 14px;
        font-weight: 400;
        /*margin-left: -10px;*/
    }

    .login-tabs * {
        z-index: 1;
    }

    .login .el-form-item__error {
        margin-top: 0.5em;
        left: 3em;
        font-size: 1em;
    }

    .login {
        width: 100%;
        overflow: hidden !important;
    }
</style>
<style scoped>
    .particle {
        position: absolute;
        top: 0;
        z-index: 0;
        width: 100%;
        height: 100%;
    }

    .login {
        color: #ffffff;
    }

    .login-title {
        text-align: center;
        font-size: 2em;
        color: #000000;
        width: 600px;
        /*background-clip	*/
        /*background-attachment	*/
        padding: 40px 50px 0 50px;
    }

    .login-img {
        height: 50px;
        background-image: url("../static/title.png");
        background-position: 0 0;
        background-size: 450px;
        background-repeat: no-repeat;
        background-origin: padding-box;
    }

    .login-tabs:hover {
        /*margin-top: 7px;*/
    }

    .login-tabs * {
        /*transition: all 2s;*/
    }

    .login-tabs {
        width: 600px;
        height: 374px;
        margin-left: auto;
        margin-right: auto;
        background: #FFF;
        color: #000000;
        border-radius: 7px;
        box-shadow: #00000033 0 0 12px 2px;
    }

    .background {
        display: table;
        position: absolute;
        z-index: -1;
        width: 100%;
        height: 100%;
        background: #e6e8eb center;
        background-size: cover;
    }
</style>
